<template>
  <div class="video-container-wrapper">
    <div class="video-box" style="margin: 0 auto;">
      <div id="video-container" class="video-player"></div>
    </div>
    <div class="control-buttons">
      <el-button type="primary" @click="init">初始化</el-button>
      <el-button type="success" @click="play">播放</el-button>
      <el-button type="warning" @click="stop">暂停</el-button>
      <el-button @click="openSound">打开声音</el-button>
      <el-button @click="closeSound">关闭声音</el-button>
      <el-button type="info" @click="startSave">开始录制</el-button>
      <el-button type="info" @click="stopSave">停止录制</el-button>
      <el-button @click="capturePicture">截图</el-button>
      <el-button @click="fullScreen">全屏</el-button>
      <el-button @click="getOSDTime">获取时间</el-button>
      <el-button type="danger" @click="ezopenStartTalk">开始对讲</el-button>
      <el-button type="danger" @click="ezopenStopTalk">停止对讲</el-button>
      <el-button type="danger" @click="destroy">销毁</el-button>
    </div>
  </div>
</template>

<style scoped>
.video-container-wrapper {
  padding: 20px;
  background: #f5f7fa;
  border-radius: 4px;
}

.video-box {
  margin-bottom: 20px;
  background: #000;
  border-radius: 4px;
  overflow: hidden;
  width: 80%;
}

.video-player {
  width: 100%;
  height: 800px;
}

.control-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center; /* 新增：水平居中 */
  max-width: 80%; /* 新增：限制最大宽度 */
  margin: 0 auto; /* 新增：水平居中 */
  margin-top: 20px;
}

.el-button {
  margin: 0;
}
</style>

<script>
import EZUIKit from "ezuikit-js";
var player = null;

export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  mounted: () => {
    console.group("mounted 组件挂载完毕状态===============》");
  },
  methods: {
    init() {
      if (player) {
        this.destroy();
      }

      // fetch("https://open.ys7.com/jssdk/ezopen/demo/token")
      //   .then((response) => response.json())
      //   .then((res) => {
      //     var accessToken = res.data.accessToken;

      //   });
      player = new EZUIKit.EZUIKitPlayer({
        id: "video-container", // 视频容器ID
        accessToken: "at.6ilhedtc5ijjqchf3rdd2jme3m7myt9u-45htyysoez-10miavp-lzlhfkygg",
        url: "ezopen://open.ys7.com/F44241499/1.hd.live",
        // simple: 极简版; pcLive: pc直播; pcRec: pc回放; mobileLive: 移动端直播; mobileRec: 移动端回放;security: 安防版; voice: 语音版;
        template: "pcLive",
        // plugin: ["talk"], // 加载插件，talk-对讲

        handleError: (error) => {
          console.error("handleError", error);
        },
        // language: "zh", // zh | en
        // staticPath: "/ezuikit_static", // 如果想使用本地静态资源，请复制根目录下ezuikit_static 到当前目录下， 然后设置该值
        env: {
          // https://open.ys7.com/help/1772?h=domain
          // domain默认是 https://open.ys7.com, 如果是私有化部署或海外的环境，请配置对应的domain
          // The default domain is https://open.ys7.com If it is a private deployment or overseas (outside of China) environment, please configure the corresponding domain
          domain: "https://open.ys7.com",
        },
      });
      window.player = player;
    },
    play() {
      var playPromise = player.play();
      playPromise.then((data) => {
        console.log("promise 获取 数据", data);
      });
    },
    stop() {
      var stopPromise = player.stop();
      stopPromise.then((data) => {
        console.log("promise 获取 数据", data);
      });
    },
    getOSDTime() {
      var getOSDTimePromise = player.getOSDTime();
      getOSDTimePromise.then((data) => {
        console.log("promise 获取 数据", data);
      });
    },
    capturePicture() {
      var capturePicturePromise = player.capturePicture(
        `${new Date().getTime()}`
      );
      capturePicturePromise.then((data) => {
        console.log("promise 获取 数据", data);
      });
    },
    openSound() {
      var openSoundPromise = player.openSound();
      openSoundPromise.then((data) => {
        console.log("promise 获取 数据", data);
      });
    },
    closeSound() {
      var openSoundPromise = player.closeSound();
      openSoundPromise.then((data) => {
        console.log("promise 获取 数据", data);
      });
    },
    startSave() {
      var startSavePromise = player.startSave(`${new Date().getTime()}`);
      startSavePromise.then((data) => {
        console.log("promise 获取 数据", data);
      });
    },
    stopSave() {
      var stopSavePromise = player.stopSave();
      stopSavePromise.then((data) => {
        console.log("promise 获取 数据", data);
      });
    },
    ezopenStartTalk() {
      player.startTalk();
    },
    ezopenStopTalk() {
      player.stopTalk();
    },
    fullScreen() {
      player.fullScreen();
    },
    destroy() {
      var destroyPromise = player.destroy();
      destroyPromise.then((data) => {
        console.log("promise 获取 数据", data);
      });
      player = null;
    },
  },
};
</script>
